<template>
    <div class="bigHigh_box">
        <TopOne :obj="obj" :getYao="getYao" />
        <div class="customTodo_body">
            <TopTwo :todoButton="todoButton" />
            <Table :columns="columns" :data="store.tableDataTwo"    :operate="operate" style="width: 100%;">
    </Table>
        </div>
    </div>
</template>

<script setup lang="ts">
import TopOne from '../../components/topOne.vue'
import TopTwo from '../../components/topTwo.vue';
import Table from "@/components/newTable.vue"
import axios from 'axios';
import type { TableColumnType } from 'ant-design-vue';
import {useStore} from "../../store/index.ts"
import { onMounted, ref,computed } from 'vue';





const operate = ref([
    {
        icon: '',           
        title: '详情',
        click: (_key: any) => {detailOne(_key) }
    },
    {
        icon: '',
        title: '删除',
        // 括号中的为整列信息 可以切换成别的
        click: (_key: any) => {delOne(_key) }
    }
])



const store=useStore()

onMounted(()=>{
store.getTravelRequisitionS()
})




const columns = computed<TableColumnType[]>(() => {
  return [
  
    {
      title: '出差天数',
      dataIndex: 'dayY',
      key: 'dayY',
    },{
      title: '出差原因',
      dataIndex: 'travelQues',
      key: 'travelQues',
    },{
      title: '开始时间',
      dataIndex: 'startTime',
      key: 'startTime',
    },{
      title: '结束时间',
      dataIndex: 'endTime',
      key: 'endTime',
    },{
      title: '提交时间',
      dataIndex: 'subTime',
      key: 'subTime',
    },{
      title: '审批状态',
      dataIndex: 'current_status',
      key: 'current_status',
    },{
      title: '提交人员',
      dataIndex: 'subPerson',
      key: 'subPerson',
    },
  ];
});









// 传给第一个input框的数据
const obj = {
    // 第一个输入框
    inputOne: {
        done: true,
        tishi: '搜索关键词',
    },
    // 后面倒数第二个带小人的输入框
    inputTwo: {
        done: true,
        tishi: "提交人员"
    },
    // 日历输入框
    inputThere: {
        done: true,
        tishi: '提交时间'
    },
    // 3个下拉列表
    selectOne: {
        done: true,
        tishi: '审批状态',
        todoDone: [
            {
                value: '已通过',
                label: '已通过',
            },
            {
                value: '待审批',
                label: '待审批',
            },
            {
                value: '被否决',
                label: '被否决',
            },
            {
                value: '被驳回',
                label: '已撤销',
            },
        ]
    },
    selectTwo: {
        done: true,
        tishi: '请假类型',
        todoDone: [
            {
                value: '事假',
                label: '事假',
            },

        ]
    },
    selectThere: {
        done: false,
        tishi: '客户星级',
        todoDone: [
            {
                label: '⭐',
                value: '1',
            },
            {
                label: '⭐⭐',
                value: '2',
            },
            {
                label: '⭐⭐⭐',
                value: '3',
            },
        ]
    }
}
// 获取到input的数据
function getYao(value: Object) {
    console.log(value, '头部请求获取到的');
}
// 传给一排按钮的数据+方法
const todoButton = [
    { id: 1, name: '➕︎添加', fn: addOne },
    { id: 2, name: '⬇导入' },
    { id: 3, name: '⬆导出' },
    // {id:4,name:'🗊新建任务'},
    // {id:5,name:'🗘转移客户'},
    // {id:6,name:'🕴移入公海'},
    // {id:7,name:'⛙合并客户'},
    // {id:8,name:'🖊︎批量编辑'},
]
// 给按钮绑定事件
function addOne() {
    console.log("添加");
}
// import axios from 'axios';
let tableData = ref()
 
// 获取数据
// onMounted(() => {
//     datalist()
// });
// let datalist = async () => {
//     let typeOne = "出差"
//     try {
//         // 执行异步操作，获取外部数据
//         const response = await axios.post('http://localhost:3000', { type: `${typeOne}` });
//         const data = await response.data;
//         console.log(data, '-----data');

//         // 对获取到的数据进行处理
//         tableData.value = data.data;
//     } catch (error) {
//         console.error(error);
//     }
// }

// 表格按钮
// 删除弹框
import { ElMessageBox, ElMessage } from 'element-plus'
const dialogVisible = ref(false)
let handleDelete = async (index: number) => {
    dialogVisible.value = true
    ElMessageBox.confirm('是否删除该条信息?')
        .then(async () => {
            try {
                const response = await axios.post('http://localhost:3000/del', { key: `${index}`, type: "出差申请" });
                if (response.data.code == 200) {
                    console.log('POST 请求成功:', response.data);
                    ElMessage({
                        message: response.data.msg,
                        type: 'success',
                    })
                }
                datalist()
            } catch (error) {
                ElMessage.error('删除失败')
            }
        })
        .catch(() => {
            ElMessage.error('删除失败')
        })
}

let multipleSelection = ref([])
function handleSelectionChange(val: any) {
    multipleSelection.value = val;
}
</script>

<style scoped></style>